// src/composables/useTooltip.js
import { ref, onUnmounted } from 'vue'

export const TooltipPosition = {
    TOP: 'top',
    BOTTOM: 'bottom',
    LEFT: 'left',
    RIGHT: 'right'
}

export function useTooltip(canvasRef, options = {}) {
    let tooltipEl = null
    let canvas = null  // 存储 canvas 实例引用

    const createTooltip = () => {
        if (tooltipEl) return

        tooltipEl = document.createElement('div')
        tooltipEl.className = 'device-tooltip'
        tooltipEl.style.position = 'fixed'
        tooltipEl.style.backgroundColor = 'rgba(0, 0, 0, 0.75)'
        tooltipEl.style.color = 'white'
        tooltipEl.style.padding = '5px 10px'
        tooltipEl.style.borderRadius = '4px'
        tooltipEl.style.fontSize = '12px'
        tooltipEl.style.zIndex = '10000'
        tooltipEl.style.pointerEvents = 'none'
        tooltipEl.style.display = 'none'
        document.body.appendChild(tooltipEl)
    }

    // 计算实际坐标的辅助函数
    const calculateActualPosition = (target) => {
        const vpt = canvas.viewportTransform
        const zoom = canvas.getZoom()
        const canvasRect = canvasRef.value.getBoundingClientRect()

        // 获取对象在画布上的实际位置（考虑缩放和平移）
        const objCenter = target.getCenterPoint()
        const actualX = (objCenter.x * vpt[0] + vpt[4]) + canvasRect.left
        const actualY = (objCenter.y * vpt[3] + vpt[5]) + canvasRect.top

        // 计算实际尺寸（考虑缩放）
        const actualWidth = target.width * target.scaleX * zoom
        const actualHeight = target.height * target.scaleY * zoom

        return {
            x: actualX,
            y: actualY,
            width: actualWidth,
            height: actualHeight
        }
    }

    const showTooltip = (text, target, position = TooltipPosition.TOP) => {
        if (!tooltipEl) {
            createTooltip()
        }

        if (!canvasRef.value || !target) return

        tooltipEl.textContent = text
        const actualPos = calculateActualPosition(target)

        let x, y
        const offset = 10 // 提示框偏移量

        switch (position) {
            case TooltipPosition.TOP:
                x = actualPos.x
                y = actualPos.y - actualPos.height / 2 - offset
                tooltipEl.style.transform = 'translateX(-50%)'
                break

            case TooltipPosition.BOTTOM:
                x = actualPos.x
                y = actualPos.y + actualPos.height / 2 + offset
                tooltipEl.style.transform = 'translateX(-50%)'
                break

            case TooltipPosition.LEFT:
                x = actualPos.x - actualPos.width / 2 - offset
                y = actualPos.y
                tooltipEl.style.transform = 'translate(-100%, -50%)'
                break

            case TooltipPosition.RIGHT:
                x = actualPos.x + actualPos.width / 2 + offset
                y = actualPos.y
                tooltipEl.style.transform = 'translateY(-50%)'
                break
        }

        tooltipEl.style.left = `${x}px`
        tooltipEl.style.top = `${y}px`
        tooltipEl.style.display = 'block'
    }

    const hideTooltip = () => {
        if (tooltipEl) {
            tooltipEl.style.display = 'none'
        }
    }

    const initTooltipEvents = (_canvas) => {
        canvas = _canvas  // 保存 canvas 实例引用
        const defaultPosition = options.defaultPosition || TooltipPosition.TOP

        canvas.on('mouse:over', (e) => {
            if (e.target && e.target.deviceInfo) {
                const position = options.getPosition
                    ? options.getPosition(e.target.deviceInfo)
                    : defaultPosition

                showTooltip(
                    e.target.deviceInfo.name || '未命名设备',
                    e.target,
                    position
                )
            }
        })

        canvas.on('object:moving', (e) => {
            if (e.target && e.target.deviceInfo) {
                const position = options.getPosition
                    ? options.getPosition(e.target.deviceInfo)
                    : defaultPosition

                showTooltip(
                    e.target.deviceInfo.name || '未命名设备',
                    e.target,
                    position
                )
            }
        })

        canvas.on('mouse:out', (e) => {
            if (e.target && e.target.deviceInfo) {
                hideTooltip()
            }
        })

        // 添加缩放事件监听
        canvas.on('mouse:wheel', (e) => {
            const activeObject = canvas.getActiveObject()
            if (activeObject && activeObject.deviceInfo) {
                showTooltip(
                    activeObject.deviceInfo.name || '未命名设备',
                    activeObject,
                    defaultPosition
                )
            }
        })
    }

    const cleanup = () => {
        if (tooltipEl) {
            document.body.removeChild(tooltipEl)
            tooltipEl = null
        }
    }

    onUnmounted(() => {
        cleanup()
    })

    return {
        showTooltip,
        hideTooltip,
        initTooltipEvents,
        cleanup
    }
}